<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<style>
		.imgicon {
			width: 100px;
			height: 100px;
			margin-left: 10px;
			margin-top: 4px;
			border: 3px solid #33395E;
		}
		.imgiconred {
			width: 100px;
			height: 100px;
			margin-left: 10px;
			margin-top: 4px;
			border: 3px solid red;
		}
		.iconlist {
		}

		.listbox {
			width:100%;
			border: 4px solid #33395E;
			float:left;
			text-align: left
		}
	</style>
</head>
<!-- 播放音乐 loop="loop"-->
<audio id="notice">
	<source src="mp3/song.mp3" type="audio/mpeg">
</audio>
<script>
		var websocket=null;
		if('WebSocket' in window)
		{
			websocket=new WebSocket('ws://10.51.40.29:1993/task/webSocket/0f8692da64074b918b158c51afa2b9a4');
		}else
		{
			alert("该浏览器不支持websocket!");
		}
		websocket.onopen=function(event)
		{
			console.log('连接建立');
			websocket.send("{\"code\":200,\"message\":\"成功\",\"cmd\":\"BAYONET\",\"data\":{\"carmeraId\":\"1210110089958686721\"}}");
		}
		websocket.onclose=function(event)
		{
			console.log('连接关闭');
		}
		websocket.onmessage=function(event)
		{
			//sendMsg   操作状态、视频id、进度
            $("#receiveNsg").html(event.data);
            var jsondata = eval('(' + event.data + ')');
           // JSON.stringify(sendjson)  toJSONString()
            if(jsondata.cmd=="WARNING")
            {
                var img = new Image();
                // 改变图片的src
                img.src = jsondata.data.bgImg;
                // 加载完成执行
                img.onload = function(){
                    // 打印
                    $("#picwidth").val(img.width);
                    $("#picheight").val(img.height);
                };
                var mywidth=$("#picwidth").val();
                var myheight=$("#picheight").val();
                if(mywidth=="")
                {
                    mywidth=1080;
                }
                if(myheight=="")
                {
                    myheight=607;
                }
                var  mydata={"bgimg":jsondata.data.bgImg,"width":mywidth,"height":myheight,"time":3583333,"icons":[]};

                var dataxxfdaf1={"iconUrl":jsondata.data.bgImg,"x":jsondata.data.positionVO.x,"y":jsondata.data.positionVO.y,"width":jsondata.data.positionVO.w,"height":jsondata.data.positionVO.h,"time":3583333};
                // var dataxxfdaf2={"iconUrl":jsondata.data.faceUrl,"x":jsondata.data.positionVO.x,"y":jsondata.data.positionVO.y,"width":jsondata.data.positionVO.w,"height":jsondata.data.positionVO.h,"time":3583333};
                mydata.icons.push(dataxxfdaf1);
                $(".listbox").prepend("<img width=120 height=120  class='imgiconred' title='"+jsondata.data.score+"' src='"+jsondata.data.faceUrl+"' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                makebg(mydata);
                document.getElementById("notice").play();
			}else  if(jsondata.cmd=="BAYONET")
			{
                var img = new Image();
                // 改变图片的src
                img.src = jsondata.data.faceBgUrl;
                // 加载完成执行
                img.onload = function(){
                    // 打印
                    // $("#picwidth").val(img.bgWidth);
                    // $("#picheight").val(img.bgHeight);
                };
                var mywidth=$("#picwidth").val();
                var myheight=$("#picheight").val();
                if(mywidth=="")
                {
                    mywidth=1080;
                }
                if(myheight=="")
                {
                    myheight=607;
                }
                var  mydata={"bgimg":jsondata.data.faceBgUrl,"width":mywidth,"height":myheight,"time":3583333,"icons":[]};

                // var dataxxfdaf2={"iconUrl":jsondata.data.faceUrl,"x":jsondata.data.positionVO.x,"y":jsondata.data.positionVO.y,"width":jsondata.data.positionVO.w,"height":jsondata.data.positionVO.h,"time":3583333};
				for(var i=0;i<jsondata.data.faces.length;i++)
				{
                    var dataxxfdaf1={"iconUrl":jsondata.data.faceBgUrl,"x":jsondata.data.faces[i].faceRect.x,"y":jsondata.data.faces[i].faceRect.y,"width":jsondata.data.faces[i].faceRect.w,"height":jsondata.data.faces[i].faceRect.h,"time":3583333};
                    mydata.icons.push(dataxxfdaf1);
                }

               // $(".listbox").prepend("<img width=120 height=120  class='imgiconred' title='"+jsondata.data.score+"' src='"+jsondata.data.faceBgUrl+"' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                makebg(mydata);
                document.getElementById("notice").play();

			}

			
		}
		websocket.onerror=function()
		{
			console.log('websocket通信发生错误！');
		}
		
		window.onbeforeunload=function()
		{
			websocket.close();
		}


        function makebg(data)
        {
            var issamll=(data.width>1000)?1:1;
            var canvas = document.getElementById('mycanvasId');
            var cxt = canvas.getContext("2d");
            cxt.clearRect(0,0,data.width,data.height);
            //绘制图片
            var img = new Image();
            img.src = data.bgimg;
            cxt.clearRect(0,0,data.width/issamll,data.height/issamll);
            img.onload = function() {
                cxt.drawImage(img,0,0,data.width/issamll,data.height/issamll);
                //cxt.drawImage(img, 0, 0, 180, 500);
                //画一个透明的黑色边框矩形
                var list=data.icons;
                for(var i=0;i<list.length;i++)
                {
                    cxt.strokeStyle = "yellow";
                    cxt.strokeRect(list[i].x/issamll, list[i].y/issamll, list[i].width/issamll, list[i].height/issamll);
                    changelist(data,list[i].iconUrl,list[i].time,list[i].x/issamll, list[i].y/issamll, list[i].width/issamll, list[i].height/issamll);
                }
            }
        }
        var mkx=0;
        function changelist(data,url,time,x,y,width,height)
        {
            mkx++;
            //	$("#picshowxfd").css({});
            //	$(".listbox").prepend("<img class='imgicon' src='"+url+"' title='"+time+"' id='"+bgurl+"' />");
            $(".listbox").prepend("<canvas id='cnxfd"+mkx+"'  width=120 height=120  class='imgicon' title='"+url+"'></canvas>");
            //		alert($("#cnxfd"+mkx).html());
            var canvas = document.getElementById('cnxfd'+mkx);
            var cxt = canvas.getContext("2d");
            cxt.clearRect(0,0,120,120);
            //绘制图片
            var img = new Image();
            img.src = url;
            img.onload = function() {
                cxt.drawImage(img,x,y,width,height,0,0,120,120);
            }
        }
	</script>

<body>
测试websocket!!
<canvas id="mycanvasId"   width="1920" height="700"></canvas><br/>
<div class="iconlist">
	<div class="listbox">
		<div clas="iconboxclass" ></div>
	</div>
</div>
<input type="hidden" id="picwidth" />
<input type="hidden" id="picheight" />
<div id="receiveNsg"></div>
</body>
</html>